<template>
	<div id="index">
		<div class="banner">
			<div class="main">
				<div class="bannerLeft" :class="{'center':!($mq.resize && $mq.above('960px'))}">
					<ul>
						<li class="title">一个伪前端的实践之路</li>
						<li>不断学习是一种习惯</li>
						<li>是你走向优秀的唯一途径</li>
						<li class="enTip">Become a Better Developer by Learning and Sharing</li>
					</ul>
				</div>
				<div class="bannerRight" v-if="$mq.resize && $mq.above('960px')">
					<div class="lunbo">
						<Carousel-3d speed="1" perspective="240">
							<Slide :index="0"><img src="./img/coding.jpg" alt="" /></slide>
							<Slide :index="1"><img src="./img/coding.jpg" alt="" /></slide>
							<Slide :index="2"><img src="./img/coding.jpg" alt="" /></slide>																						
						</Carousel-3d>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="contentLeft">
				<div>
					<p class="quanxian">您暂无权限访问此内容</p>
				</div>
			</div>
			<div class="contentRight" v-if="$mq.resize && $mq.above('960px')">
				<div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>